<!--
  数据集选择器组件
  用于在表单中选择数据集

  属性:
  - modelValue: 选中的数据集ID (v-model)
  - sourceId: 可选的数据源ID过滤器，若提供则只显示该数据源下的数据集
  - placeholder: 占位符文本
  - disabled: 是否禁用
  - clearable: 是否可清空
-->
<template>
  <el-select
    v-model="selectedDataset"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    class="dataset-select"
    :loading="loading"
  >
    <el-option
      v-for="option in filteredDatasetOptions"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    >
      <div class="dataset-option">
        <span>{{ option.label }}</span>
        <el-tag size="small" :type="getDatasetTypeTagType(getDatasetType(option.value))">
          {{ getDatasetTypeLabel(getDatasetType(option.value)) }}
        </el-tag>
      </div>
    </el-option>
    <template #empty>
      <el-empty description="暂无数据集" :image-size="60" />
    </template>
  </el-select>
</template>

<script setup>
import { computed, ref, watch, onMounted } from 'vue'
import { useDataSetStore, datasetTypeOptions } from '../../stores/dataSet'

// 定义组件属性
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: null
  },
  sourceId: {
    type: [Number, String],
    default: null
  },
  placeholder: {
    type: String,
    default: '请选择数据集'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  }
})

// 定义事件
const emit = defineEmits(['update:modelValue', 'change'])

// 获取数据集 store
const dataSetStore = useDataSetStore()
const loading = ref(false)

// 预加载数据集
onMounted(async () => {
  loading.value = true
  await dataSetStore.fetchDatasets()
  loading.value = false
})

// 计算属性：数据集选项
const datasetOptions = computed(() => dataSetStore.datasetOptions)

// 根据数据源ID筛选数据集选项
const filteredDatasetOptions = computed(() => {
  if (!props.sourceId) {
    return datasetOptions.value
  }
  return datasetOptions.value.filter(option =>
    String(option.sourceId) === String(props.sourceId)
  )
})

// 计算属性：当前选中值
const selectedDataset = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
    emit('change', val)
  }
})

// 获取数据集类型
const getDatasetType = (datasetId) => {
  const dataset = dataSetStore.getDatasetById(datasetId)
  return dataset ? dataset.type : null
}

// 获取数据集类型标签
const getDatasetTypeLabel = (type) => {
  const option = datasetTypeOptions.find(opt => opt.value === type)
  return option ? option.label : '未知'
}

// 获取数据集类型标签样式
const getDatasetTypeTagType = (type) => {
  const typeMap = {
    table: 'success',
    view: 'info',
    query: 'warning'
  }
  return typeMap[type] || ''
}

// 当数据源ID变化时，可能需要重置选中的数据集
watch(() => props.sourceId, (newSourceId) => {
  if (newSourceId && selectedDataset.value) {
    const dataset = dataSetStore.getDatasetById(selectedDataset.value)
    if (dataset && String(dataset.sourceId) !== String(newSourceId)) {
      selectedDataset.value = null
    }
  }
})
</script>

<style scoped>
.dataset-select {
  width: 100%;
}

.dataset-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}
</style>
